<template>
	<div>

		<div class="action-bar">
			<!-- 同步按钮 -->
			<div>
				<el-button type="primary" size="small" icon="el-icon-refresh" @click="syncActionKeys">一键同步</el-button>
			</div>
			<!-- 搜索表单 -->
			<el-form size="small" @submit.prevent.native="findPermissions">
				<el-form-item>
					<el-input v-model="keyword" placeholder="请输入接口名或备注">
						<el-button slot="append" icon="el-icon-search" native-type="submit"></el-button>
					</el-input>
				</el-form-item>
			</el-form>
		</div>
		<el-table :data="permissions" v-loading="loading">
			<el-table-column label="接口" prop="actionKey" align="center"></el-table-column>
			<el-table-column label="控制器" prop="controller" align="center"></el-table-column>
			<el-table-column label="备注" prop="remark" align="center"></el-table-column>
			<el-table-column label="创建时间" prop="createTime" align="center"></el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<el-button type="text" size="small" icon="el-icon-edit-outline" @click="editPermission(scope.row)">编辑</el-button>
					<el-button type="text" size="small" icon="el-icon-delete" @click="deletePermission(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination-wrap" v-show="totalSize > 10">
			<el-pagination background layout="prev, pager, next" :total="totalSize" :current-page="pageNumber" @current-change="pageChange"></el-pagination>
		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				permissions: [],
				keyword: '',
				pageNumber: 1,
				totalSize: 0
			}
		},
		created() {
			this.findPermissions();
		},
		methods: {
			findPermissions(isSwitchPage = false) {
				if (!isSwitchPage) this.pageNumber = 1;

				this.loading = true;
				this.$util.request('/permission', {
					keyword: this.keyword,
					pageNumber: this.pageNumber
				}, (res) => {
					this.loading = false;

					this.permissions = res.list;
					this.totalSize = res.totalRow;
				}, true);
			},
			syncActionKeys() {
				const loading = this.$loading({
					text: '同步中...'
				});
				this.$util.request('/permission/sync', {}, (res) => {
					loading.close();

					if (res.state == 'ok') {
						this.$message.success(`成功同步了${res.count}个接口`);
						this.findPermissions();
					} else {
						this.$util.msg(res.msg);
					}
				});
			},
			pageChange(e) {
				this.pageNumber = e;
				this.findPermissions(true);
			},
			editPermission(item) {
				this.$prompt('请输入备注', '', {
					inputValue: item.remark,
					inputValidator(val) {
						if (!val) return '备注不能为空';
					}
				}).then(res => {
					const loading = this.$loading({
						text: '处理中...'
					});
					this.$util.request('/permission/updateRemark', {
						id: item.id,
						remark: res.value
					}, (res) => {
						loading.close();

						if (res.state == 'ok') {
							this.$message.success('修改成功');
							this.findPermissions();
						} else {
							this.$util.msg(res.msg);
						}
					});
				}).catch(_ => {});
			},
			deletePermission(item) {
				this.$util.requestWithConfirm(`确定删除【${item.actionKey}】吗？`, '/permission/delete', {
					id: item.id
				}, '警告', '删除').then(_ => {
					this.findPermissions();
				});
			}
		}
	}
</script>

<style lang="scss">
	.action-bar {
		display: flex;
		justify-content: space-between;
	}
</style>
